<template>
  <el-form ref="form" label-width="70px" :inline="true" class="login_container" :model="form" :rules="rules">
    <h3 class="login_title">系统登陆</h3>
    <el-form-item label="用户名" prop="username">
      <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submit" style="margin-top: 10px;margin-left: 103px" type="primary">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import Cookie from "js-cookie"
  import { getMenu,login } from "../api"
    export default {
        name: "Login",
        data(){
            return{
                form:{
                    username: "",
                    password: ""
                },
                rules:{
                    username:[
                        { required: true, message: '请输入用户名',trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码',trigger: 'blur'}
                    ]
                },
                type:1
            }
        },
        methods:{
            submit(){
                //token信息
                this.$refs.form.validate((validate)=>{
                    if (validate){
                        Cookie.set("type",this.type);
                        if (this.type==1){//管理员登录
                            login(this.form).then(({data})=>{
                                console.log(data);
                                //将token信息传入cookie中用于不同页面间的通信
                                if (data.code == 20000){
                                    Cookie.set("token",data.data.token);
                                    const loginAdmin=data.data.admin;
                                    loginAdmin.password=null;
                                    Cookie.set("admin",JSON.stringify(loginAdmin));
                                    //获取菜单数据放入到store种
                                    this.$store.commit("setMenu",data.data.menu);
                                    //跳转页面
                                    this.openLogin(loginAdmin.username);
                                    this.$router.push("/home");
                                }else{
                                    this.$message.error(data.message);
                                }
                            });
                        }else if (this.type==2){//员工登录

                        }else {//业主登录

                        }

                    }
                });
            },
            openLogin(username) {
                const h = this.$createElement;
                this.$notify({
                    title: '登录成功',
                    message: h('i', { style: 'color: teal'}, '欢迎您！'+username)
                });
            }
        }
    }
</script>

<style lang="less" scoped>
.login_container{
  width: 350px;
  border: 1px solid #ffffff;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  box-sizing: border-box;
  .el-input{
    width: 198px;
  }
  .login_title{
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }
}
</style>
